<template>
  <div class="goods-info flex">
    <div class="goods-swiper">
      <!-- 大图展示 -->
      <div v-if="currentItem.imageUrl" class="goods-views-left">
        <img :src="currentItem.imageUrl" alt="" class="swiper-current">
        <!-- 遮罩层  -->
        <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></div>
        <div @mouseenter="enter" @mouseleave="leave" @mousemove="marks" class="superMarks"></div>
      </div>
      <div v-show="isShow" class="lgImg">
        <img :src="currentItem.imageUrl" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}">
      </div>
      <div class="height-10" />
      <!-- 小图展示 -->
      <el-carousel class="carousel" height="94px" :autoplay="false" arrow="always" indicator-position="none"
        v-if="imagesData && imagesData.length > 0">
        <el-carousel-item v-for="item in imagesData" :key="item">
          <div class="swiper-item-img flex">
            <img v-for="(subitem, subindex) in item" :key="subindex" :src="subitem.imageUrl" alt=""
              :class="currentItem.imageUrl === subitem.imageUrl ? 'actived' : ''" class="swiper-img mar-r-6 cursor-p"
              @mouseenter="mousePicEnter(subitem)">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="goods-parameters pad-t-9">
      <div class="font-16 font-w">
        <span class="cross-border-tag tag-1">海外直邮</span>
        {{goodsDataInfo.title}}
      </div>
      <div class="price pad-20 font-color-6 mar-t-12">
        <div class="flex v-align-c mar-t--1 mar-l--3">
          <div>
            <template v-if="!isShowPrice">
              <!-- 未登录 -->
              <div class="font-18 font-price-2d">登录后可见</div>
            </template>
            <template v-if="isShowPrice">
              <!-- 已登录 -->
              <div class="font-18 font-w font-price-2d">￥{{goodsDataInfo.distributePrice}}
                <span
                  v-if="goodsDataInfo.maxDistributePrice && goodsDataInfo.maxDistributePrice !== goodsDataInfo.distributePrice">~￥{{ goodsDataInfo.maxDistributePrice }}</span>
              </div>
            </template>
            <div class="font-color-6 mar-r-8 mar-l-4 pad-t-6">价格</div>
          </div>
          <div v-if="isShowPrice" class="price-ri-box">
            <div class="font-18 font-w font-color">￥{{goodsDataInfo.sellPrice}}
              <span
                v-if="goodsDataInfo.maxSellPrice && goodsDataInfo.maxSellPrice !== goodsDataInfo.sellPrice">~￥{{ goodsDataInfo.maxSellPrice }}</span>
            </div>
            <div class="font-color-6 mar-r-8 mar-l-4 pad-t-6">建议零售价</div>
          </div>

        </div>
        <!-- <div class="flex v-align-c mar-t-11">
          <span class="mar-r-8">起批量</span>
          <div>{{ goodsDataInfo.wholesaleNum || '1' }}起</div>
        </div> -->
      </div>
      <!-- <div class="flex v-align-c font-color-6 pad-t-26">
        <div class="width-68 pad-r-10">铺货</div>
        <div class="flex-item">
          <div class="flex v-align-c">
            <div class="mar-r-19">支持</div>
            <div class="flex v-align-c font-color">
              <img :src="iconPtTb" alt="" class="width-20 height-20 border-radius-2 mar-r-7">
              <span class="mar-r-15">淘宝</span>
            </div>
            <div class="flex v-align-c font-color">
              <img :src="iconPtDy" alt="" class="width-20 height-20 border-radius-2 mar-r-7">
              <span class="mar-r-15">抖音</span>
            </div>
            <div class="flex v-align-c font-color">
              <img :src="iconPtAmz" alt="" class="width-20 height-20 border-radius-2 mar-r-7">
              <span class="mar-r-15">亚马逊</span>
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="flex v-align-c font-color-6 pad-t-22 mar-r--30 mar-b-27">
        <div class="width-68 pad-r-10">物流</div>
        <div class="flex-item">
          <div class="flex v-align-c">
            <div>快递<span class="font-color">￥8</span></div> -->
      <!-- <div class="font-12 mar-l-11 font-red-16">该商品为预售商品，预计下单7天后发货</div> -->
      <!-- </div>
        </div>
      </div> -->
      <div class="line mar-b-20" />
      <div v-if="goodsDataInfo.skuFlag === 1 && goodsDataInfo.goodsStatus === 1"
        v-for="(itemProp,propIndex) in goodsDataInfo.skuPropList" :key="itemProp">
        <template v-if="propIndex !== (goodsDataInfo.skuPropList.length -1)">
          <div class="flex v-align-t font-color-6 mar-b-13">
            <div class="width-68 pad-r-10">{{itemProp.skuPropName}}</div>
            <div class="flex-item">
              <div class="flex flex-wrap font-12">
                <div v-for="(itemPropValue, propValueIndex) in itemProp.skuPropValueList" :key="propValueIndex"
                  :class="selectedPropValueIdMap[itemProp.skuPropId] === itemPropValue.skuPropValueId ? 'actived' : ''"
                  class="sku-f-img mar-r-14 mar-b-17 cursor-p" @click="handleSelectSkuPropValue(itemPropValue)">
                  <div class="flex v-align-c">
                    <img :src="iconSkuSel" alt="" class="icon-sku-actived width-23 height-23">
                    <img v-if="itemPropValue.imageUrl" src="https://veekrayimg.joinsun.vip/images/share-s-picture.png"
                      alt="" :title="itemPropValue.skuPropValue" class="width-32 height-32">
                    <span :class="itemPropValue.imageUrl ? '' : 'text-align-c'"
                      class="_line-1 mar-l-5 mar-r-5">{{ itemPropValue.skuPropValue }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="flex v-align-t font-color-6 mar-b-16 mar-t--4">
            <div class="width-68 pad-r-10">{{itemProp.skuPropName}}</div>
            <div class="flex-item mar-t--4 font-color">
              <div>
                <ul>
                  <li v-for="(itemPropValue, propValueIndex) in itemProp.skuPropValueList" :key="propValueIndex"
                    class="flex v-align-c pad-b-15">
                    <div class="second-1">{{ itemPropValue.skuPropValue }}</div>
                    <template v-if="isShowPrice">
                      <div class="second-2">{{ itemPropValue.distributePrice }}元</div>
                    </template>
                    <template v-if="!isShowPrice">
                      <div class="second-2">登录后可见</div>
                    </template>
                    <div class="second-3 font-color-9">{{ itemPropValue.remainStock }}件可售</div>
                    <div class="second-4">
                      <el-input-number v-model="itemPropValue.number" class="input-number" :min="0"
                        :max="itemPropValue.remainStock" :disabled="itemPropValue.remainStock > 0 ? false:true"
                        @change="handleSkuChange" />
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </template>
        <div class="line mar-b-30" />
      </div>
      <div class="btns" v-if="goodsDataInfo.goodsStatus === 1">
        <el-button :disabled="goodsDataInfo.skuFlag === 0 && goodsDataInfo.stock <= 0 ? true:false"
          class="button dark mar-r-10" @click="handleBuy(1)" :loading="isAddShoppingCartLoading">立即下单
        </el-button>
        <el-button :disabled="goodsDataInfo.skuFlag === 0 && goodsDataInfo.stock <= 0 ? true:false"
          class="button mar-r-10" @click="handleBuy(2)" :loading="isAddShoppingCartLoading">加入购物车</el-button>
        <!-- <el-button class="button">铺货</el-button> -->
      </div>
      <div class="btns" v-else-if="goodsDataInfo.goodsStatus === 0">
        <el-button disabled="disabled" style="background-color: #f7f7f7;color: #ccc;border:#f7f7f7 1px solid;"
          class="button dark mar-r-10">商品已下架
        </el-button>
      </div>
      <div class="btns" v-else>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    watch,
    reactive,
    computed
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    CaretBottom
  } from '@element-plus/icons-vue'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    useActions
  } from '@/store/utils/useActions'
  import {
    addOrUpdateShoppingCart
  } from '@/api/shoppingCart/shoppingCart'
  import iconVideoPlay from '@/assets/images/icon_video_play.png'
  import iconVideoStop from '@/assets/images/icon_video_stop.png'
  import iconPtTb from '@/assets/images/icon_pt_tb.png'
  import iconPtDy from '@/assets/images/icon_pt_dy.png'
  import iconPtAmz from '@/assets/images/icon_pt_amz.png'
  import iconSkuSel from '@/assets/images/icon_sku_actived.png'
  import pic1 from '@/assets/images/uploads/pic-1.png'
  import pic2 from '@/assets/images/uploads/pic-2.png'
  import pic3 from '@/assets/images/uploads/pic-3.png'
  import pic4 from '@/assets/images/uploads/pic-4.png'
  import pic5 from '@/assets/images/uploads/pic-5.png'
  import pic6 from '@/assets/images/uploads/pic-6.png'
  import pic7 from '@/assets/images/uploads/pic-7.png'
  import pic8 from '@/assets/images/uploads/pic-8.jpg'
  import pic9 from '@/assets/images/uploads/pic-9.jpg'
  import {
    ElMessage
  } from 'element-plus'
  export default defineComponent({
    name: 'GoodsInfo',
    components: {
      CaretBottom
    },
    props: {
      goodsDataInfo: Object
    },
    setup(props) {
      const router = useRouter()
      const storeState = useState('user', ['loginUserObj'])
      const enterpriseStoreState = useState('enterpriseConfig', ['enterpriseConfig'])
      // 是否正在添加购物车中
      const isAddShoppingCartLoading = ref(false)
      const imagesData = reactive( < any > [])
      const currentItem = ref( < any > {})
      const indexFirstSku = ref(0)
      const skuSecond = ref( < any > [])
      const videoPlayBoolean = ref(false)
      const goodsDataInfo = ref({})
      const selectedPropValueIdMap = ref({})
      const isShowPrice = ref(false)

      const isShow = ref( < boolean > false)
      const left = ref( < number > 0)
      const top = ref( < number > 0)
      const leftLgImg = ref( < number > 0)
      const topLgImg = ref( < number > 0)
      const storeActions: any = useActions('orderCheck', ['setOrderCheckParams'])

      watch(() => props.goodsDataInfo, (newVal, oldVal) => {
        let index = 0
        while (index < newVal.goodsImageList.length) {
          imagesData.push(newVal.goodsImageList.slice(index, index += 5))
        }
        currentItem.value = newVal.goodsImageList[0]
        initSkuData(newVal)
        goodsDataInfo.value = newVal
      })

      onMounted(() => {
        storeActions.setOrderCheckParams(null)
        if (storeState.loginUserObj.value) {
          isShowPrice.value = true
        } else {
          if (enterpriseStoreState.enterpriseConfig.value && enterpriseStoreState.enterpriseConfig.value
            .priceVisible === 1) {
            isShowPrice.value = true
          }
        }
      })

      const initSkuData = (goodsData: object) => {
        if (goodsData.skuFlag === 1) {
          let skuPropCount = goodsData.skuPropList.length
          for (var i = 0; i < skuPropCount; i++) {
            let skuPropObj = goodsData.skuPropList[i]
            if (i !== skuPropCount - 1) {
              handleSelectPropValueId(skuPropObj.skuPropId, skuPropObj.skuPropValueList[0]
                .skuPropValueId)
              skuPropObj.skuPropValueList[0].isSelected = true
            } else {
              // 最后一个不需要获取,直接返回
              initSkuPropValueList(goodsData.skuList, skuPropObj.skuPropValueList)
            }
          }
        }
      }
      // 选择规格和规格项
      const handleSelectPropValueId = (skuPropId: number, propValueId: number) => {
        selectedPropValueIdMap.value[skuPropId] = propValueId
      }
      // 初始化sku规格项的价格和库存和数量
      const initSkuPropValueList = (skuList: any, skuPropValueList: any) => {
        let hasSelectPropValueIdStr = ref('')
        for (var key in selectedPropValueIdMap.value) {
          if (hasSelectPropValueIdStr.length > 0) {
            hasSelectPropValueIdStr = hasSelectPropValueIdStr + ',' + selectedPropValueIdMap.value[key]
          } else {
            hasSelectPropValueIdStr = selectedPropValueIdMap.value[key]
          }
        }

        for (var j = 0; j < skuPropValueList.length; j++) {
          let resPVIds = hasSelectPropValueIdStr + ',' + skuPropValueList[j].skuPropValueId
          // 根据已选的规格项，获取对应的sku信息
          let skuItem = skuList.find(_item => _item.skuValueIds == resPVIds)
          const distributePrice = ref(0)
          const remainStock = ref(0)
          const skuId = ref(null)
          if (skuItem) {
            distributePrice.value = skuItem.distributePrice
            remainStock.value = skuItem.remainStock
            skuId.value = skuItem.skuId
          }
          skuPropValueList[j].distributePrice = distributePrice.value
          skuPropValueList[j].remainStock = remainStock.value
          skuPropValueList[j].number = 0
          skuPropValueList[j].skuId = skuId.value
        }
      }

      const mousePicEnter = (item: any) => {
        if (item) {
          currentItem.value = item
        }
        if (videoPlayBoolean.value) {
          videoPlayBoolean.value = false
        }
      }
      const group = (array: any, subGroupLength: number) => {
        let index = 0
        const newArray = []
        while (index < array.length) {
          newArray.push(array.slice(index, index += subGroupLength))
        }
        return newArray
      }

      const skuFirstSelect = (index: number) => {
        indexFirstSku.value = index
      }
      const handleSkuChange = (value: number) => {
        console.log('Change number', value)
      }
      const playSwiperVideo = () => {
        videoPlayBoolean.value = true
        const video = document.querySelector('#swiper-video')
        if (video !== null) {
          video.play()
        }
      }
      const stopSwiperVideo = () => {
        videoPlayBoolean.value = false
      }

      const handleSelectSkuPropValue = (itemPropValue: any) => {
        handleSelectPropValueId(itemPropValue.skuPropId, itemPropValue.skuPropValueId)
        initSkuPropValueList(goodsDataInfo.value.skuList, goodsDataInfo.value.skuPropList[goodsDataInfo.value
          .skuPropList.length - 1].skuPropValueList)
      }

      const handleBuy = (buyType: number) => {
        const goodsParams = []
        // buyType ：1-立即下单，2-加入购物车
        const loginUser = storeState.loginUserObj.value
        if (loginUser && loginUser.userId) {
          if (goodsDataInfo.value.skuFlag === 1) {
            const skuPropValueList = goodsDataInfo.value.skuPropList[goodsDataInfo.value.skuPropList.length - 1]
              .skuPropValueList
            if (skuPropValueList && skuPropValueList.length > 0) {
              for (var i = 0; i < skuPropValueList.length; i++) {
                let skuValuData = skuPropValueList[i]
                var isAdd = true
                if (!skuValuData.number || skuValuData.number <= 0 || !skuValuData.remainStock || skuValuData
                  .remainStock <= 0) {
                  isAdd = false
                }
                if (isAdd) {
                  let goodsObj = {
                    goodsId: goodsDataInfo.value.goodsId,
                    skuId: skuValuData.skuId,
                    goodsNum: skuValuData.number,
                    cartId: null
                  }
                  goodsParams.push(goodsObj)
                }
              }
            } else {
              ElMessage.error('规格有问题，无法购买！')
              return
            }
          } else {
            let goodsObj = {
              goodsId: goodsDataInfo.value.goodsId,
              goodsNum: 1,
              skuId: null,
              cartId: null
            }
            goodsParams.push(goodsObj)
          }
          if (goodsParams.length <= 0) {
            ElMessage.error('请填写购买数量！')
            return
          }
          let shoppingCartParams = {
            goodsList: goodsParams
          }
          if (buyType === 2) {
            // 加入购物车
            isAddShoppingCartLoading.value = true
            addOrUpdateShoppingCart(shoppingCartParams).then(response => {
              isAddShoppingCartLoading.value = false
              if (response.isError) return
              ElMessage.success('加入购物车成功！')
            })
          } else if (buyType === 1) {
            // 立即购买
            const crossBorderOrderType = ref('')
            if (goodsDataInfo.value.internalSale === 1 && goodsDataInfo.value.crossBorderExport === 1) {
              crossBorderOrderType.value = ''
            } else if (goodsDataInfo.value.internalSale === 1) {
              crossBorderOrderType.value = '1'
            } else if (goodsDataInfo.value.crossBorderExport === 1) {
              crossBorderOrderType.value = '3'
            }
            const orderCheckParams = {
              orderCheckGoodsList: goodsParams,
              crossBorderOrderType: crossBorderOrderType.value
            }
            storeActions.setOrderCheckParams(orderCheckParams)
            router.push({
              path: '/buy'
            })
          } else {
            ElMessage.error('未知购买方式！')
            return
          }
        } else {
          ElMessage.error('请先登录！')
          return
        }
      }

      const enter = () => {
        isShow.value = true
      }
      const leave = () => {
        isShow.value = false
      }
      const marks = (e: any) => {
        var marksWidth = 320
        var marksHeight = 320
        left.value = e.offsetX - marksWidth / 2
        top.value = e.offsetY - marksHeight / 2
        if (left.value < 0) {
          left.value = 0
        } else if (left.value > 544) {
          left.value = 544
        }
        if (top.value < 0) {
          top.value = 0
        } else if (top.value > 225) {
          top.value = 225
        }
        // console.log('layer 222', left.value, top.value)
        // 大d图片除以小的图片的宽高
        leftLgImg.value = -left.value * 800 / 544 + 61
        if (leftLgImg.value > -0.7) {
          leftLgImg.value = -0.7
        } else if (leftLgImg.value < -256) {
          leftLgImg.value = -256
        }
        topLgImg.value = -top.value * 800 / 544 + 61
        if (topLgImg.value > -0.7) {
          topLgImg.value = -0.7
        } else if (topLgImg.value < -256) {
          topLgImg.value = -256
        }
        // console.log('layer 111', leftLgImg.value, topLgImg.value)
      }

      return {
        imagesData,
        currentItem,
        indexFirstSku,
        skuSecond,
        skuFirstSelect,
        handleSkuChange,
        group,
        mousePicEnter,
        iconVideoPlay,
        iconVideoStop,
        iconPtTb,
        iconPtDy,
        iconPtAmz,
        iconSkuSel,
        videoPlayBoolean,
        playSwiperVideo,
        stopSwiperVideo,
        goodsDataInfo,
        ...storeState,
        ...enterpriseStoreState,
        handleSelectPropValueId,
        handleSelectSkuPropValue,
        selectedPropValueIdMap,
        handleBuy,
        isAddShoppingCartLoading,
        isShowPrice,
        isShow,
        left,
        top,
        leftLgImg,
        topLgImg,
        enter,
        leave,
        marks
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $recommendGoodsWidth: 200px;

  .goods-info {
    .price-ri-box {
      padding-left: 124px;
    }

    .goods-swiper {
      width: 544px;
      margin-right: 50px;
      min-height: 544px;
      position: relative;

      .goods-views-left {
        width: 100%;
        height: 544px;
        overflow: hidden;
      }

      /* 遮罩层 */
      .marks {
        width: 320px;
        height: 320px;
        position: absolute;
        cursor: crosshair;
        filter: alpha(opacity=15);
        -moz-opacity: 0.15;
        opacity: 0.15;
        background-color: #000;
        border: 1px solid #fff;
        /*top:0px;  //内联设置了动态的top，left
        left:0px;*/
      }

      /*遮罩层superMarks */
      .superMarks {
        width: 544px;
        height: 544px;
        background-color: rgba(220, 220, 220, 0);
        position: absolute;
        top: 0px;
        left: 0px;
      }

      /* 左侧隐藏大图 */
      .lgImg {
        width: 544px;
        height: 544px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        left: 544px;
        z-index: 100;
        border: 1px solid #aaa;
        background-color: #fff;
        box-sizing: border-box;
      }

      .lgImg img {
        width: 800px;
        height: 800px;
        position: absolute;
        /*top:100px;
        left:100px;*/
      }

      ::v-deep(.swiper-zoom) {
        width: 544px;
        height: 544px;

        >img {
          width: 544px;
          height: 544px;
        }

        .mouse-cover {
          background-color: rgba(0, 0, 0, 1);
          opacity: 0.15;
        }
      }

      .swiper-current {
        width: 544px;
        height: 544px;
      }

      .video-swiper {
        width: 544px;
        height: 544px;
        display: block;
        margin: 0;
        padding: 0;
      }

      .icon-video-play {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -34px 0 0 -34px;
        z-index: 5;
      }

      .icon-video-stop {
        position: absolute;
        right: 5px;
        top: 10px;
        z-index: 5;
      }

      .swiper-img {
        width: 94px;
        height: 94px;
        border: #fff 2px solid;
        box-sizing: border-box;
        display: block;

        &.actived {
          border: #182245 2px solid;
        }
      }

      ::v-deep(.carousel) {
        padding: 0 20px 0 24px;

        .el-carousel__arrow {
          width: 16px;
          height: 90px;
          background: #f3f3f3;
          border-radius: 0;
          color: #999;
        }

        .el-carousel__arrow--left {
          left: -24px;
        }

        .el-carousel__arrow--right {
          right: -20px;
        }
      }
    }

    .goods-parameters {
      width: 598px;

      .price {
        background: #f2f2f2;
        min-height: 89px;
        box-sizing: border-box;
      }

      .line {
        height: 1px;
        background: #f2f2f2;
      }

      .line-s {
        width: 1px;
        height: 14px;
        background: #c8c8c8;
      }

      .sku-f-img {
        border: #d7d7d7 1px solid;
        background: #f5f5f5;
        height: 36px;
        position: relative;

        &.actived {
          border: $darkBlue 1px solid;
          height: 36px;

          >div {
            border: $darkBlue 1px solid;
          }

          .icon-sku-actived {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        >div {
          border: #fff 1px solid;
        }

        .icon-sku-actived {
          display: none;
        }

        img {
          display: block;
        }

        ._line-1 {
          width: 77px;
          height: 32px;
          line-height: 32px;
        }
      }

      .second-1 {
        width: 108px;
      }

      .second-2 {
        width: 143px;
      }

      .second-3 {
        width: 177px;
      }

      .second-4 {
        ::v-deep(.input-number) {
          &.el-input-number {
            width: 102px;
            line-height: 26px;
          }

          .el-input-number__decrease {
            border-right: #eeeeee 1px solid !important;
          }

          .el-input-number__increase {
            border-left: #eeeeee 1px solid !important;
          }

          .el-input-number__decrease,
          .el-input-number__increase {
            position: absolute;
            z-index: 1;
            top: 1px;
            width: 25px;
            height: auto;
            text-align: center;
            background: #ffffff;
            color: #464646;
            font-size: 13px;
            border-right: 0;
            line-height: 24px;
          }

          .el-input {
            line-height: 26px;
            border-right: 0;
            --el-input-border-radius: 0;
          }

          .el-input__inner {
            border-right: 0;
            height: 26px;
            line-height: 26px;
            padding: 0 15px;
            padding-left: 23px;
            padding-right: 23px;
            border: #eeeeee 1px solid;
          }
        }
      }

      .btns {
        ::v-deep(.button) {
          color: $darkBlue;
          background: #fff;
          border-radius: 0;
          border: $darkBlue 1px solid;
          width: 162px;
          font-size: 20px;
          border-radius: 4px;
          padding: 13px 20px;

          &.dark {
            color: #fff;
            background: $darkBlue;
            border: $darkBlue 1px solid;
            border-radius: 0px;
          }
        }
      }
    }

    ._line-1 {
      /* line-height: 1.4; */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }
</style>
